// 和vue不同之处--这是一个组件
import React, { Component } from 'react'
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'

// 引入要显示的组件
// import ComAFn from '../components/ComAFn'
// import ComBClass from '../components/ComBClass'
// import ComBig from '../components/ComBig'
// import ComFather from '../components/ComFather'
// import Index from '../components/Index'
// import List from '../components/List'
// import Detail from '../components/Detail'
// import Layout from '../components/Layout'
// import NotFound from '../components/NotFound'

// 改为懒加载的方式
const ComAFn = React.lazy(()=>import('../components/ComAFn'))
const ComBClass = React.lazy(()=>import('../components/ComBClass'))
const ComBig = React.lazy(()=>import('../components/ComBig'))
const ComFather = React.lazy(()=>import('../components/ComFather'))
const Index = React.lazy(()=>import('../components/Index'))
const List = React.lazy(()=>import('../components/List'))
const Detail = React.lazy(()=>import('../components/Detail'))
const Layout = React.lazy(()=>import('../components/Layout'))
const Redux = React.lazy(()=>import('../components/Redux'))
const NotFound = React.lazy(()=>import('../components/NotFound'))

export default class Router extends Component {
    constructor() {
        super();
        this.state = {
            // 类似vue中的routes 路由表 是一个数组 循环这个数组 生成各个 Route
            routes: [
                {
                    path: '/',
                    component: Index,
                    exact: true,
                    meta: {
                        title: '首页',
                        needLogin: false
                    }
                },
                {
                    path: '/afn',
                    component: ComAFn,
                    exact: false,
                    meta: {
                        title: 'comA',
                        needLogin: false
                    }
                },
                {
                    path: '/bclass',
                    component: ComBClass,
                    exact: false,
                    meta: {
                        title: 'comB',
                        needLogin: false
                    }
                },
                {
                    path: '/big',
                    component: ComBig,
                    exact: false,
                    meta: {
                        title: '父组件-1',
                        needLogin: true
                    }
                },
                {
                    path: '/father',
                    component: ComFather,
                    exact: false,
                    meta: {
                        title: 'Father',
                        needLogin: true
                    }
                },
                {
                    path: '/redux',
                    component: Redux,
                    exact: false,
                    meta: {
                        title: 'Father',
                        needLogin: false
                    }
                },
                {
                    path: '/layout',
                    component: Layout,
                    exact: false,
                    meta: {
                        title: '嵌套路由',
                        needLogin: true
                    }
                },
                {
                    path: '/list',
                    component: List,
                    exact: false,
                    meta: {
                        title: '歌曲列表',
                        needLogin: false
                    }
                },
                {
                    path: '/detail/:name',
                    component: withRouter(Detail),
                    exact: false,
                    meta: {
                        title: '歌曲详情',
                        needLogin: false
                    }
                },
                {
                    path: '*',
                    component: withRouter(NotFound),
                    exact: false,
                    meta: {
                        title: '地址有误',
                        needLogin: false
                    }
                }
            ]
        }
    }
    render() {
        return (
            // fallback:后备 备用   Suspense：悬念
            <React.Suspense fallback={<h1><mark>Loading....</mark></h1>}>
                <Switch>
                    {
                        this.state.routes.map((item, index) => {
                            return (
                                <Route
                                    path={item.path}
                                    exact={item.exact}
                                    key={index}
                                    render={() => {
                                        // 修改title
                                        document.title = item.meta.title;
                                        // 登录验证  先判断页面是否需要登录
                                        if (item.meta.needLogin) {
                                            // 需要登录
                                            if (localStorage.getItem('hasLogin')) {
                                                // 已经登录 可以查看
                                                return (
                                                    <item.component></item.component>
                                                )
                                            } else {
                                                // 未登录 到首页
                                                return <Redirect to="/"></Redirect>
                                            }
                                        } else {
                                            // 页面不用登录
                                            return (
                                                <item.component></item.component>
                                            )
                                        }
                                    }}
                                ></Route>
                            )
                        })
                    }
                </Switch>
            </React.Suspense>
        )
    }
}
// 路由组件和非路由组件 在路文件中被<Route>组件包裹起来的才是路由组件，才会有路由对应的属性和方法
// 非路由组件可以通过withRouter解决
// withRouter是高阶组件（HOC--higherOrderComponent）高阶组件是参数为组件，返回值为新组件的函数。
// 高阶组件的作用是强化老的组件 返回一个新的 经过加工后的组件
// vue中的mixin 小程序中的behaviors react中的hoc  作用一致 都是为了给组件增加一些属性和方法
// const ComPlus = withRouter(ComPure)
// {
//     crated(),
//     data:{},
//     methods: {
//         fn{}
//     }
// }

// Behaviors({
//     data: {},

// })
